<template>
	<!--显示电影容器-->
	<div class="film-container flex">
		<!--渲染电影DIV-->
		<div class="film flex" v-for="item in list.movieList">
			<!--左侧海报-->
			<div class="photo"><img :src="item.img"/></div>
			<!--电影内容-->
			<div class="introduction">
				<!--电影名-->
				<div class="introduction-nm">
					<span>{{item.nm}}</span>
					<!--3D/2D标志-->
					<div  class="introduction-maxLogo">
						<img v-if="item.version=='v3d imax'" src="../../dist/img/3Dmax.png"/>
						<img v-if="item.version=='v2d imax'" src="../../dist/img/2Dmax.png"/>
						<img v-if="item.version=='v3d'" src="../../dist/img/2Dmax.png"/>
					</div>
				</div>
				<!--观众评-->
				<p class="introduction-sc" v-if="item.sc">观众评  <span>{{item.sc}}</span></p>
				<!--想看人数-->
				<p class="introduction-wish" v-if="!item.sc"><span>{{item.wish}}</span> 人想看</p>
				<!--主演-->
				<p class="introduction-star">主演:{{item.star}}</p>
				<!--上演日期-->
				<p class="introduction-rt">{{item.showInfo}}</p>
			</div>
			<!--购票按钮-->
			<div class="buy flex">
				<button v-if="item.globalReleased" class="en gp">购票</button>
				<button v-if="!item.globalReleased" class="en yd">预售</button>
			</div>
			<!--分割线-->
			<div class="fgx"></div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'filmContent',
	props: {
	   msg: String
	},
	props:["lists"],
	data(){
		return {
			list:[]
		}
	},
	mounted(){
		this._initData();
		console.log("mounted");
	},
	methods:{
		_initData(){
			return new Promise((resolve,reject)=>{
				var xhr = new XMLHttpRequest();
				xhr.open('GET','https://www.easy-mock.com/mock/5bd16f236f8ddc4c4d42c441/vue-maoyan/filmData');
				xhr.send();
				xhr.addEventListener("readystatechange",function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							resolve(xhr.response)
						}
					}
				})
			}).then((res)=>{
					this.list=JSON.parse(res);
					console.log("ajax请求成功：",this.list);
				})
		},
		//判断是否上演同步按钮

	},
	//
}
</script>

<style lang="scss">
	@import "../scss/common";
	.film-container{
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: r(170px);
		margin-bottom: r(104px);
		.film{
			width: 92%;
			height: r(150px);
			margin:r(18px) r(0px);
			position: relative;
			.photo{
				width: 20%;
				img{
					width:100%;
					height: 100%;
				}
			}
			.introduction{
				width: 60%;
				padding-left: r(18px);
				.introduction-nm{
					font-size: r(28px);
					font-weight: 600;
					position: relative;
					.introduction-maxLogo{
						width: r(90px);
						height: r(30px);
						display: inline-block;
						img{
							width: 100%;
							height: 100%;
						}
						margin-left: r(20px);
						padding-top: r(4px);
						
					}
				}
				.introduction-wish,.introduction-sc{
					margin-top: r(8px);
					font-size: r(22px);
					span{
						font-size: r(26px);
						font-weight: 600;
						color: #faaf00;
					}
				}
				.introduction-star{
					margin-top: r(8px);
					font-size: r(22px);
					color: #666;
					overflow: hidden;
					white-space: nowrap;
				}
				.introduction-rt{
					margin-top: r(8px);
					font-size: r(22px);
					color: #666;
				}
			}
			.buy{
				width: 20%;
				justify-content: center;
				align-items: center;
				.en{
					width: r(74px);
					height: r(44px);
					border-radius: r(10px);
					border: none;
					background: rgb(60,159,230);
					color: white;
				}
				.gp{
					background: $themeColor;
					color: white;
				}
			}
			.fgx{
				width: r(444px);
				height: r(1px);
				background: #DDDDDD;
				position: absolute;
				bottom: r(-20px);
				left: r(125px);
			}
		}
	}
</style>